<div class="DashboardList" ng-hide="noJobs">
    <div class="DashboardList-header">
        <h3 class="DashboardList-headerText">
            <translate>RECENT JOB RUNS</translate>
        </h3>
        <a href="/#/jobs" class="DashboardList-viewAll">
            <translate>VIEW ALL</translate>
        </a>
    </div>
    <div class="DashboardList-container">
        <div class="List-table">
            <div class="List-tableHeaderRow">
                <div class="d-flex">
                    <div class="List-tableHeader col-6">
                        <translate>Name</translate>
                    </div>
                    <div class="List-tableHeader col-6 DashboardList-tableHeader--time">
                        <translate>Time</translate>
                    </div>
                </div>
            </div>
           <div class="List-tableRow" ng-repeat="job in jobs">
               <div class="d-flex">
                    <div class="List-tableCell col-6">
                        <a aria-label="{{'Navigate to job titled ' + job.name | translate}}" href="{{ job.detailsUrl }}" ng-if="isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
                            <i class="fa DashboardList-status DashboardList-status--success icon-job-successful"></i>
                        </a>
                        <a aria-label="{{'Navigate to job titled ' + job.name | translate}}" href="{{ job.detailsUrl }}" ng-if="!isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
                            <i class="fa DashboardList-status DashboardList-status--failed icon-job-failed"></i>
                        </a>
                        <a aria-label="{{'Navigate to job titled ' + job.name | translate}}" href="{{ job.detailsUrl }}" class="DashboardList-nameContainer">
                            {{ job.name }}
                        </a>
                  </div>
                  <div class="List-tableCell col-6 DashboardList-timeCell">
                      {{job.time}}
                  </div>
              </div>
          </div>
       </div>
    </div>
</div>

<div class="DashboardList" ng-show="noJobs">
    <div class="DashboardList-header">
        <h3 class="DashboardList-headerText">
            <translate>RECENTLY RUN JOBS</translate>
        </h3>
    </div>
    <div class="DashboardList-container">
        <p class="DashboardList-noJobs" translate>No jobs were recently run.</p>
    </div>
</div>
